<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import titleConfig from "./success.title";
import Card from "@/components/Card/index.vue";
import successIcon from "@/static/images/success.png";

type SuccessType = "inbound" | "check";

const uiConfig = {
	labelSpan: 7,
	valueSpan: 17,
};

const type = ref<SuccessType>();
const data = ref();

const rowConfig = reactive({
	title: null,
	rowList: [],
	main: null,
});

const init = (t: SuccessType, mainOrderNumber, boxNumber, missingNumber) => {
	type.value = t;

	if (t === "check") {
		rowConfig.title = "清点完成";
		rowConfig.rowList = [
			{
				label: "主单号",
				value: mainOrderNumber,
			},
			{
				label: "总箱数",
				value: boxNumber,
			},
			{
				label: "缺件数",
				value: missingNumber,
			},
		];
		rowConfig.main = mainOrderNumber;
	}
};

const cusTitleConfig = reactive({ ...titleConfig });

onLoad((options) => {
	const { type, mainOrderNumber, boxNumber, missingNumber } = options;

	// 清点
	if (type === "check") {
		cusTitleConfig.title = "清点完成";
		init(type, mainOrderNumber, boxNumber, missingNumber);
	}
});

// 缺件登记
const missingRegister = () => {
	uni.navigateTo({
		url: `/pages/missingRegister/index?mainOrderNumber=${rowConfig.main}`,
	});
};
// 继续清点
const handleCheck = () => {
	uni.navigateTo({ url: "/pages/delivery/index" });
};
</script>

<template>
	<ViewContainer :title="cusTitleConfig">
		<Card innerClass="success-card-container">
			<view class="success-title">
				<wd-img :src="successIcon" class="icon" />
				<view class="text">{{ rowConfig.title }}</view>
			</view>

			<wd-row class="row" v-for="item in rowConfig.rowList" :key="item.label">
				<wd-col :span="item.labelSpan ?? uiConfig.labelSpan">{{
					item.label
				}}</wd-col>
				<wd-col
					class="ellipsis-2"
					:span="item.valueSpan ?? uiConfig.valueSpan"
					>{{ item.value }}</wd-col
				>
			</wd-row>
		</Card>

		<template v-if="type === 'check'">
			<view class="tip">如有缺件，清点完成后请前往缺件登记，进行缺件确定</view>
		</template>

		<view class="btn-group">
			<template v-if="type === 'check'">
				<wd-button
					@click="missingRegister"
					class="btn back"
					type="info"
					:round="false"
					>缺件登记</wd-button
				>
				<wd-button @click="handleCheck" class="btn confirm" :round="false"
					>继续清点</wd-button
				>
			</template>
		</view>
	</ViewContainer>
</template>

<style lang="less" scoped>
:deep(.success-card-container) {
	padding: 50px 80px;
}

.success-title {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 80px;

	.icon {
		width: 100px;
		height: 100px;
		transform: translateY(5px);
	}

	.text {
		font-size: 42px;
		font-weight: 600;
		margin-left: 50px;
	}
}

.tip {
	color: red;
	font-size: 30px;
	margin-top: 20px;
}

.btn-group {
	display: flex;
	justify-content: center;
	margin: 100px 0;

	.btn {
		width: 45%;
		height: 100px;
	}
}

@import url("../../components/StorageForm/style/row.less");
</style>
